<template>
  <div class="pageContainer">
    <div class="pageModules pageModules_QueryForm">
      <el-form
        ref="queryForm"
        :model="queryForm"
        label-width="120px"
        label-position="left"
        style="padding-top: 22px;"
      >
        <el-row :gutter="0">
          <el-col :span="8">
            <el-form-item label="客户名称：" prop="name">
              <el-input v-model="queryForm.name" clearable placeholder="请输入客户名称" class="formInput"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="证件号码：" prop="code">
              <el-input v-model="queryForm.code" clearable placeholder="请输入证件号码" class="formInput"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="银行账号：" prop="card">
              <el-input v-model="queryForm.card" clearable placeholder="请输入银行账号" class="formInput"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="签约机构：" prop="organization">
              <el-input
                v-model="queryForm.organization"
                clearable
                placeholder="请输入签约机构"
                class="formInput"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开始日期：" prop="start">
              <el-date-picker v-model="queryForm.start" type="date" placeholder="选择开始日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结束日期：" prop="end">
              <el-date-picker v-model="queryForm.end" type="date" placeholder="选择结束日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <div style="height: 40px; margin-bottom: 22px;"></div>
          </el-col>
          <el-col :span="8">
            <div style="height: 40px; margin-bottom: 22px;"></div>
          </el-col>
          <el-col :span="8">
            <div class="formButtonBox">
              <el-button type="primary" class="formButton" @click="onSubmit">查询</el-button>
              <el-button type="warning" class="formButton" @click="resetForm">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="pageModules_Table">
      <el-table :data="tableData" stripe class="tableContainer">
        <el-table-column align="center" prop="name" label="客户名称"></el-table-column>
        <el-table-column align="center" prop="province" label="签约机构"></el-table-column>
        <el-table-column align="center" prop="city" label="签约日期"></el-table-column>
        <el-table-column align="center" prop="zip" label="性别"></el-table-column>
        <el-table-column align="center" prop="zip" label="证件类型"></el-table-column>
        <el-table-column align="center" prop="zip" label="证件号码"></el-table-column>
        <el-table-column align="center" prop="zip" label="银行账户"></el-table-column>
        <el-table-column align="center" prop="zip" label="手机号"></el-table-column>
        <el-table-column align="center" prop="zip" label="理财经理"></el-table-column>
        <el-table-column align="center" prop="zip" label="客户风险等级"></el-table-column>
      </el-table>
    </div>

    <div class="page_pagination">
      <el-pagination background layout="prev, pager, next" :total="20"></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'customerInformation',
  data () {
    return {
      queryForm: {
        code: '',
        name: '',
        card: '',
        organization: '',
        start: '',
        end: ''
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }]
    }
  },
  methods: {
    onSubmit () {
      alert('submit')
    },
    resetForm () {
      this.$refs.queryForm.resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.pageContainer {
  width: 100%;
  overflow: hidden;
  position: relative;

  .pageModules {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    background-color: #fff;
    border-radius: 4px;
    overflow: hidden;
    padding: 12px;
    margin-bottom: 12px;
  }

  .pageModules_QueryForm {
    .formInput {
      width: 220px;
    }

    .formButtonBox {
      padding-left: 30px;

      .formButton {
        width: 100px;
      }
    }
  }

  .pageModules_Table {
    position: relative;

    .tableContainer {
      border-radius: 4px;
    }

    /deep/ .el-table {
      .el-table__header-wrapper {
        border-bottom: 2px solid #ebebeb;
      }
      th {
        .cell {
          color: #333 !important;
          line-height: 32px;
        }
      }
    }
  }

  .page_pagination {
    margin-top: 12px;
    float: right;
  }
}
</style>
